﻿button{border:none;padding:0;background:none;}

.button{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;font-weight:bold;cursor:pointer;text-decoration:none !important;}
.button span{display:inline-block;background-repeat:no-repeat;}
.button > span{padding:0 0 0 15px;background-position: left top;}
.button > span > span{padding:0 20px 0 0px;height:39px;min-width:75px;clear:left;line-height:36px;text-align:center;background-position: right top;}
.button:hover > span{background-position:left -40px;}
.button:hover > span > span{background-position:right -40px;}
.button:active > span{background-position:left -80px;}
.button:active > span > span{background-position:right -80px;}

.button > span { color:#fff;text-shadow:-1px -1px 0 rgba(0,0,0,.3); }
.button span { background-image: url(../images/btn-sprite.png);}

.button.blue > span {background-position: left top;}
.button.blue > span > span {background-position: right top;}
.button.blue:hover > span { background-position: left -40px; }
.button.blue:hover > span > span { background-position: right -40px; }
.button.blue:active > span { background-position: left -80px;}
.button.blue:active > span > span { background-position: right -80px;}

.button.gray > span {background-position: left -120px;}
.button.gray > span > span {background-position: right -120px;}
.button.gray:hover > span { background-position: left -160px; }
.button.gray:hover > span > span { background-position: right -160px; }
.button.gray:active > span { background-position: left -200px;}
.button.gray:active > span > span { background-position: right -200px;}

.button.lightblue > span { background-position: left -600px; }
.button.lightblue > span > span { background-position: right -600px; }
.button.lightblue:hover > span { background-position: left -640px; }
.button.lightblue:hover > span > span { background-position: right -640px; }
.button.lightblue:active > span { background-position: left -680px;}
.button.lightblue:active > span > span { background-position: right -680px;}

.button.green > span { background-position: left -480px; }
.button.green > span > span { background-position: right -480px; }
.button.green:hover > span { background-position: left -520px; }
.button.green:hover > span > span { background-position: right -520px; }
.button.green:active > span { background-position: left -560px;}
.button.green:active > span > span { background-position: right -560px;}

.button.white > span { background-position: left -240px; color:#394450; text-shadow:1px 1px 0 rgba(255,255,255,.5); }
.button.white > span > span { background-position: right -240px; }
.button.white:hover > span { background-position: left -280px; }
.button.white:hover > span > span { background-position: right -280px; }
.button.white:active > span { background-position: left -320px;}
.button.white:active > span > span { background-position: right -320px;}

.button.red > span { background-position: left -360px; }
.button.red > span > span { background-position: right -360px; }
.button.red:hover > span { background-position: left -400px; }
.button.red:hover > span > span { background-position: right -400px; }
.button.red:active > span { background-position: left -440px;}
.button.red:active > span > span { background-position: right -440px;}

.button img{margin:2px 5px -3px 2px;}